<template>
  <input
    :type="type"
    :placeholder="placehodler"
    v-model="value"
    @focus="InputFocusHandler"
    @blur="InputBlurHandler"
  />
</template>

<script>
export default {
  props: {
    placehodler: {
      type: String,
      default: "请输入",
      required: false,
    },
    type: {
      type: String,
      default: "text",
      required: false,
    },
    name: {
      type: String,
      required: true,
    },
    /* isFocus: {
      type: Boolean,
      default: false,
      required: true,
    }, */
    /*  value: {
      type: String,
      default: '',
      required: false,
    }, */
  },
  components: {},
  data() {
    return {
      value: "",
    };
  },
  create() {},
  mounted() {},
  watch: {
    value(newVal, oldVal) {
        if(newVal.length>0){
          this.setClearIconSate(this.name,false)
        }else{
          this.setClearIconSate(this.name,true)
        }
      
    },
  },
  methods: {
    changeSate() {
      this.$emit("changeLoginWay");
    },
    InputFocusHandler() {
      this.$emit('inputFocus',this.name,true)
    },
    InputBlurHandler(){
      this.$emit('inputFocus',this.name,false)
    },
    setClearIconSate(name,state){
        this.$emit('setClearSate',name,state)
    },
    clearValue(){
        this.value=''
    }
  },
};
</script>

<style>
</style>